import { IComponent } from "./sys";
import { ComponentArgs } from "../filesystem";

/**
 * 布局控件 应该具备一个resize事件，不同click事件
 */
export class Layout extends IComponent {

    /**
     * 可以水平布局，可以垂直布局
     * 中间存在一个div，作为分隔线
     */

    /**
     * 实际进行构造传入的参数
     */
    public data: LayoutArgs;

    /**
     * true代表横向布局，false代表垂直布局
     */
    public lay_row: boolean;

    public id: string;

    /**
     * 水平布局左边item，默认为空div（垂直布局时为null）
     */
    leftItem?: LayoutItem;

    /**
     * 水平布局右边item，默认为空div（垂直布局时为null）
     */
    rightItem?: LayoutItem;

    /**
     * 垂直布局上边item，默认为空div（水平布局时为null）
     */
    topItem?: LayoutItem;

    /**
     * 垂直布局下边item，默认为空div（水平布局时为null）
     */
    bottomItem?: LayoutItem;

    /**
     *分割用的item
     */
    spliterItem?: LayoutItem;

    constructor(args: LayoutArgs) {
        super(args);
        this._init(args);
    }

    private _init(args: LayoutArgs) {
        /**
         * 先创建整个布局的domBase
         */
        if (args.classList === null || args.classList === undefined) {
            args.classList = [];
        }
        this.classList = args.classList;
        if (args.lay_row) {
            this.classList.push("lay-container-row");
        } else {
            this.classList.push("lay-container-column");
        }
        this.id = args.id;
        this.lay_row = args.lay_row;
        this._createDomBase(args);
        /**
         * 挂载传入的dom
         */
        let itemArgs: LayoutItemArgs = {
            id: "",
            category: LayoutItemCategory.NONE
        };
        if (args.spliterItem === null || args.spliterItem === undefined) {
            itemArgs.id = args.id + "spliter";
            itemArgs.category = LayoutItemCategory.NONE;
            this.spliterItem = this._createItem(itemArgs);
        } else {
            this.spliterItem = args.spliterItem;
        }
        if (args.lay_row) {
            if (args.leftItem === null) {
                itemArgs.id = args.id + "left";
                itemArgs.category = LayoutItemCategory.LEFT;
                this.leftItem = this._createItem(itemArgs);
            } else {
                this.leftItem = args.leftItem;
            }
            if (args.rightItem === null) {
                itemArgs.id = args.id + "right";
                itemArgs.category = LayoutItemCategory.RIGHT;
                this.rightItem = this._createItem(itemArgs);
            } else {
                this.rightItem = args.rightItem;
            }

            this.leftItem.setDomParent(this.domBase);
            this.spliterItem.setDomParent(this.domBase);
            this.rightItem.setDomParent(this.domBase);
            this.leftItem.domParent = this.domBase;
            this.spliterItem.domParent = this.domBase;
            this.rightItem.domParent = this.domBase;
        } else {
            if (args.topItem === null) {
                itemArgs.id = args.id + "top";
                itemArgs.category = LayoutItemCategory.TOP;
                this.topItem = this._createItem(itemArgs);
            } else {
                this.topItem = args.topItem;
            }
            if (args.bottomItem === null) {
                itemArgs.id = args.id + "bottom";
                itemArgs.category = LayoutItemCategory.BOTTOM;
                this.bottomItem = this._createItem(itemArgs);
            } else {
                this.bottomItem = args.bottomItem;
            }
            /**
             * 设置布局节点间的dom关系
             */
            this.topItem.setDomParent(this.domBase);
            this.spliterItem.setDomParent(this.domBase);
            this.bottomItem.setDomParent(this.domBase);
            this.topItem.domParent = this.domBase;
            this.bottomItem.domParent = this.domBase;
            this.spliterItem.domParent = this.domBase;
        }
        this.data = args;
    }

    /**
     * 如果指定的item没有传入，则会自己构造默认的主题
     * @param args 
     */
    protected _createItem(args: LayoutItemArgs): LayoutItem {
        return new LayoutItem(args);
    }
}

/**
 * Layout接口
 */
export interface LayoutArgs extends ComponentArgs {

    /**
     *继承的ComponentArgs中不是必填，此处覆盖
     */
    id: string;

    /**
     * true为水平布局，false为垂直布局
     */
    lay_row: boolean;

    /**
     * 水平布局左边item，默认为空div
     */
    leftItem?: LayoutItem;

    /**
     * 水平布局右边item，默认为空div
     */
    rightItem?: LayoutItem;

    /**
     * 水平布局上边item，默认为空div
     */
    topItem?: LayoutItem;

    /**
     * 水平布局下边item，默认为空div
     */
    bottomItem?: LayoutItem;

    /**
     *分隔用的item
     */
    spliterItem?: LayoutItem;
}

/**
 * 布局中的item
 */
export class LayoutItem extends IComponent {

    public id: string;

    /**
     * 构造item时传入的参数
     */
    public data: LayoutItemArgs;

    constructor(args: LayoutItemArgs) {
        super(args);
        this._init(args);
    }

    private _init(args: LayoutItemArgs) {
        if (args.classList === null || args.classList === undefined) {
            args.classList = [];
        }
        this.classList = args.classList;
        /**
         * 避免每次都通过this，这样会每次去原型链上找
         */
        let classLists = this.classList;
        switch (args.category) {
            case LayoutItemCategory.LEFT:
                classLists.push("lay-container-row-left");
                break;
            case LayoutItemCategory.RIGHT:
                classLists.push("lay-container-row-right");
                break;
            case LayoutItemCategory.TOP:
                classLists.push("lay-container-column-top");
                break;
            case LayoutItemCategory.BOTTOM:
                classLists.push("lay-container-column-bottom");
                break;
            case LayoutItemCategory.ROW_SPLITER:
                classLists.push("lay-container-row-spliter");
                break;
            case LayoutItemCategory.COLUMN_SPLITER:
                classLists.push("lay-container-column-spliter");
                break;
            case LayoutItemCategory.NONE:
                classLists.push("");
                break;
            default:
                /**
                 * 如果枚举进行了新增，但是没有添加新的case，则会编译期在此捕获该错误
                 */
                const exhaustiveCheck: never = args.category;
                break;
        }
        /**
         * 使用该对象后置空
         */
        classLists = null;
        this.data = args;
        this.domBase = this._createDomBase(args);
        args.backgroundColor && (this.domBase.style.backgroundColor = args.backgroundColor);
        args.width && (this.domBase.style.width = args.width);
        args.height && (this.domBase.style.height = args.height);
    }

    protected _createDomBase(args: LayoutItemArgs): HTMLElement {
        return super._createDomBase(args);
    }
}

/**
 * LayoutItem接口
 */
export interface LayoutItemArgs extends ComponentArgs {

    id: string;

    /**
     * 创建Item的类型
     */
    category: LayoutItemCategory;

    /**
     * 布局item的背景色
     */
    backgroundColor?: string;

    /**
     * 布局item的宽度(覆盖默认宽度)
     */
    width?: string;

    /**
     * 布局item的高度(覆盖默认宽度)
     */
    height?: string
}

/**
 * LayoutItem的类别
 */
export enum LayoutItemCategory {

    /**
     * 水平布局的左边item
     */
    LEFT,

    /**
     * 水平布局的右边item
     */
    RIGHT,

    /**
     * 水平布局的分隔线
     */
    ROW_SPLITER,

    /**
     * 垂直布局的上部item
     */
    TOP,

    /**
     * 垂直布局的上部item
     */
    BOTTOM,

    /**
     * 垂直布局的分割线
     */
    COLUMN_SPLITER,

    /**
     * 没指定分割线时的默认分隔div，不做任何操作
     */
    NONE
}